<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class 与 Style 绑定</title>
    <style>
        .blue{
            background-color: blue;
            width: 50px;
            height: 50px;
        }

        .active {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>

    <div id="app">

        <button @click="setStyle()">按钮</button>

        <div v-bind:class="{active: isActive}" class="blue"></div>

        <div :class="style1"></div>

    </div>
    
    <script>

        var app = Vue.createApp({
            data() {
                return {
                    isActive:false,
                    style1:"blue"
                }
            },
            methods: {
                setStyle() {
                    this.isActive = !this.isActive
                }
            }

        }).mount("#app")

    </script>
</body>
</html>